<template>
  <div id="login">
    <img src="../../assets/icon/bgLogin.png" alt="" class="bgLogin">
    <div class="title">欢迎使用</div>
    <div v-if="loginType == 1">
      <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field>
      <mt-field label="验证码" placeholder="请输入验证码" v-model="captcha">
        <mt-button v-show="show" @click='getCode()'>获取验证码</mt-button>
        <mt-button disabled  v-show="!show">{{count}} s</mt-button>
      </mt-field>
      <mt-button class="loginBtn" size="large" @click='nowLogin()'>立即登录</mt-button>
    </div>
    <mt-button v-if="loginType == 2" class="loginBtn" size="large" @click='wxLogin()'>微信登录</mt-button>
    <!-- <p class="otherLogin" @click='goReg()'>注册</p> -->
    <p class="otherType"><span class="line"></span><span class="txt">其他登录方式</span><span class="line"></span></p>
    <p class='otherIcon' v-if="loginType == 1"><img @click='changeLoginType()' src="../../assets/icon/wx.png" alt=""></p>
    <p class='otherIcon' v-if="loginType == 2"><img @click='changeLoginType()' src="../../assets/icon/phone.png" alt=""></p>
  </div>
</template>

<script>
  import {get_code,login,get_wx_openid,check_tel,bind_tel_openid,baseURLs} from '@/api/';
  export default {
    created() {

    },
    data() {
      return {
        phone: '',
        captcha: '',
        timer: null,
        show: true,
        count: '',
        code:null,
        loginType:'2',//登录方式1 手机 2 wx
        openid:'',//授权id
        touxiang:'',//头像
        redUrl:'',//重定向地址
        code:'',
      }
    },
    methods: {
      getCode() { //获取验证码
        const TIME_COUNT = 90;
        let tel = this.phone;
        get_code({
          tel
        }).then(res => {
          console.log(res)
          if (res.status == 0) {
            this.$messagebox.alert(res.msg)
            return
          } else if (!this.timer) {
            this.code = res.data;
            this.count = TIME_COUNT;
            this.show = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000)
          }
        })

      },
      nowLogin() { //立即登录
        let code = this.captcha;
        let tel = this.phone;
        login({tel,code,type:this.loginType}).then(res => {
          console.log(res)
          if (tel == '') {
            this.$messagebox.alert("请输入手机号！");
            return
          } else if (code == '') {
            this.$messagebox.alert("验证码不能为空！");
            return
          }else if (res.status == 0) {
            this.$messagebox.alert(res.msg);
            return
          }else if (code != this.code) {
            this.$messagebox.alert('验证码输入不正确！');
            return
          }else if (res.status == 1) {
            localStorage.setItem('tel', JSON.stringify(tel));
            this.$messagebox.alert('登录成功！').then(action => {
              if(action == 'confirm'){
                this.$router.push('/');
              }
            });;

          }
          // console.log(res)
        })
      },
      goReg() {
        this.$router.push('/reg')
      },
      changeLoginType(){//修改登录方式
        if(this.loginType == 1){
          this.loginType = 2;
        }else if(this.loginType == 2){
          this.loginType = 1;
        }
        console.log(this.loginType)
      },
      wxLogin(){//微信登录http://localhost:8080/#/login
        this.redUrl = this.host = window.location.protocol+"//"+window.location.host;
        let area =encodeURIComponent(this.redUrl+ '/#/login');
        window.location.href= 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxaf0be1a54bfa232a&redirect_uri='+area+'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
          // get_wx_openid().then( res=>{
          //   console.log(res);
          //   return false;
          //   let This = this;
          //   if(res.status == 1){
          //     This.openid= res.data.openid;
          //     This.touxiang = res.data.touxiang;
          //       This.$messagebox.prompt(' ', '绑定手机号', {inputPlaceholder: '请输入手机号'}).then(({ value, action }) => {
          //         check_tel({tel:value}).then(res =>{
          //           // console.log(res)
          //           if(res.status == 1){
          //             console.log(value)
          //             bind_tel_openid({tel:value,openid:This.openid,touxiang:This.touxiang}).then(res =>{
          //               if(res.status == 1){
          //                 This.$router.push('/');
          //               }
          //             })
          //           }else{
          //             This.$messageBox('提示', res.msg);
          //           }
          //         })
          //       })
          //   }
          // })



      }
    },
    mounted() {
        if((window.location.href).split('=')[1] != undefined){
          this.code = (window.location.href).split('=')[1].split('&')[0];
          if(this.code != ''){
            // console.log(this.code)
            let This = this;
            // console.log(This.code)
            get_wx_openid({type:2,code:This.code}).then( res=>{
              console.log(res)
              if(res.status == 0){//已经注册，但是未绑定手机号
              console.log('已经注册但是未绑定')
              This.openid = res.data.openid;
              This.touxiang = res.data.touxiang;
              if(This.openid != null){
                this.$messagebox.prompt(' ', '绑定手机号', {inputPlaceholder: '请输入手机号'}).then(({ value, action }) => {
                  console.log(value)
                  console.log(action)
                      localStorage.setItem('tel', JSON.stringify(value));
                      bind_tel_openid({tel:value,openid:This.openid,touxiang:This.touxiang}).then(res =>{
                        if(res.status == 1){
                          This.$router.push('/');
                        }else if(re.status == 0){
                          This.$messageBox('提示', res.msg);
                        }
                      })



                })
              }

              }else if(res.status == 1){
                console.log(res)
                localStorage.setItem('tel', JSON.stringify(res.data.tel));
                This.$router.push('/');
              }
            })
          }
        }

    }

  }
</script>

<style scoped>
  #login .bgLogin {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    z-index: -1;
  }

  #login {
    z-index: 1;
    display: flex;
    flex-direction: column;
    margin-top: 50%;
    padding: 0 1em;
  }
  .otherType{color: #ddd;display: flex;justify-content: center;align-items: center;}
    .otherType span{display: inline-block;}
    .otherType .line{height: 1px;width: 20%;background: #fff;}
    .otherType .txt{padding: 0 10px;}
    .otherIcon{text-align: center;margin-top: 10px;}
    .otherIcon img{width: 40px;}
  #login .title {
    font-size: 2em;
    z-index: 2;
    color: #000000;
  }

  #login .loginBtn {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  .otherLogin {
    color: #fff;
  }
</style>
